<!--关联订单 -->
<template>
	<div class="contact">
		<div class="ointblock marginAuto">
			<div class="ointeach" v-for="(item,index) in ointdata" :key="index" @click="ointsefun(item,index)"
				:class="ointdataac == item.id ? 'activeointeach':''">
				<img class="ointeachbricon" src="@/assets/fun/ointicon.png" alt="图标" />
				<img class="ointeachbricon" v-if="ointdataac == item.id"
					style="width:32px;height:32px;right:3px;bottom:3px;" src="@/assets/fun/ointicon.png" alt="图标" />
				<div class="ointeacht mainColor flex" style="justify-content: space-between;">
					<p>
						<span style="display:inline-block;">{{ item.order_sn }}</span>
						<span>{{ item.order_status_txt }}</span>
						<span v-if="item.is_urgent == 1">加急</span>
						<span v-if="item.replenish_need">补充需求</span>
					</p>
				</div>
				<div class="ointeachb">
					<div class="ointeachbtitle ellipsis01">{{ item.order_name }}</div>
					<div class="ointeachbdec ellipsis02" v-html="item.design_need"></div>
				</div>
			</div>
			<div class="loadingicon" v-if="isloadingicon" style="height:20px;text-align:center;"><span
					class="el-icon-loading" style="font-size:22px;"></span></div>
		</div>
		<!-- 订单详情 -->
		<el-dialog id="createorder" title="订单详情" :visible.sync="isorderxq" width="740px" top="20px"
			:before-close="neworderClosefun" :modal-append-to-body="false" :modal="false">
			<div class="rblock">
				<orderxq :orderitem="orderitem" ref="orderxq"></orderxq>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import orderxq from '@/components/order/orderxq';
	export default {
		props:['linOrderId'],
		components: {
			orderxq
		},
		data(){
			return {
				isorderxq:false,
				isloadingicon:false,
				page:1,
				limit:10,
				ointdataac:'',
				ointdata:[]
			}
		},
		mounted(){
			this.initlinkorder(); // 获取关联订单
		},
		methods:{
			initlinkorder(){  // 获取关联订单
				let sendData = {
					page: this.page,
					limit: this.limit,
					order_id:this.linOrderId,
				};
				if(!this.linOrderId){
					console.log('请求关联订单无母订单id')
					return false
				};
				// console.log(sendData)
				this.isloadingicon = true;
				this.apifun.$post('/pc/order/getRelatedOrder', sendData).then((res) => {
					// console.log(res)
					this.isloadingicon = false;
					if (res.code == 200) {
						let datas = res.data;
						this.ointdata = datas;
					}
				})
			},
			ointsefun(item,index){
				this.isorderxq = true;
				this.ointdataac = item.id;
				this.orderitem = item;
				setTimeout(() => {
					this.$refs.orderxq.getorderxqfun(this.navac);
				})
			},
			neworderClosefun(){
				this.isorderxq = false
			}
		}
	}
</script>

<style scoped lang="scss">
	// 指派列表
	.ointblock {
		height: 70vh;
		padding-top: 20px;
		overflow-y: auto;
	
		.ointeach:hover {
			background-color: var(--bgColor);
		}
	
		.ointeach {
			position: relative;
			width: 94%;
			padding: 0 1%;
			margin: 10px auto 0;
			border-radius: 10px;
	
			.ointeachbricon {
				position: absolute;
				bottom: 7px;
				right: 7px;
				width: 16px;
				height: 16px;
			}
	
			.ointeacht {
				width: 95%;
				margin: auto;
				padding: 0 10px;
				height: 40px;
				line-height: 40px;
				border-bottom: 1px solid #EEEEEE;
				font-size: 14px;
	
				span {
					margin-right: 20px;
				}
			}
	
			.ointeachb {
				padding: 5px 15px;
				line-height: 30px;
				color: #333;
	
				.ointeachbtitle {
					font-weight: bold;
					font-size: 14px;
				}
	
				.ointeachbdec {
					font-size: 14px;
					white-space: pre-wrap;  //只对中文起作用
					// word-wrap: break-word;  // 只对英文起作用，以单词作为换行依据
					word-break: break-all;  // 只对英文起作用，以字母作文换行依据（长链接需要这个）
				}
			}
		}
	
		.activeointeach {
			background-color: var(--bgColor);
		}
	}
</style>